<template>
  <goods-list>
    <div v-for="(item,index) in goods" class="good-list" @click="itemClick(index)">
      <img v-if="item.show !== undefined" :src="item.show.img" alt="" @load="imagesLoad">
      <img v-if="item.image !== undefined" :src="item.image" alt="" @load="loads">
      <div class="goods-list-item-text">
        <p class="title">{{item.title}}</p>
        <span class="price">￥{{item.price}}</span>
        <span class="cfav"><span>{{item.cfav}}</span></span>
      </div>
    </div>
  </goods-list>
</template>

<script>
  import GoodsList from "components/content/goods/GoodsList";

  export default {
    name: "GoodsListItem",
    components: {GoodsList},
    component:{
      GoodsList
    },
    props: {
      goods: {
        type: Array,
        default(){
          return [];
        }
      }
    },
    data(){
      return {
        currentIndex:0
      };
    },
    methods: {
      imagesLoad(){
        this.$bus.$emit("itemImageLoad");
      },
      itemClick(index){
        console.log(this.goods[index]);
        this.$router.push('/Detail/' + this.goods[index].iid);
      },
      loads(){
        if (++this.currentIndex === this.goods.length -1){
          this.$bus.$emit("itemLoad");
        }
      }
    },
  }
</script>

<style scoped>
  .good-list img{
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
  .good-list{
    width: 48%;
    box-sizing: border-box;
    font-size: 12px;
  }
  .title{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .good-list .price{
    font-size: 14px;
    color: var(--color-tint);
  }
  .goods-list-item-text{
    text-align: center;
    height: 40px;
    position: relative;
  }
  .cfav img{
  }
  .cfav{
    width: 100px;
    height: 14px;
    background-image: url("~assets/images/goods/sc.svg");
    background-size: 100% 100%;
    vertical-align: middle;
  }
  .cfav span{
    margin-left: 35px;
  }
</style>
